<script setup lang="ts">
import { ref } from 'vue'
import ExamIcon from '@/components/icons/ExamIcon.vue'
import RecruitmentIcon from '@/components/icons/RecruitmentIcon.vue'
import ScoreQueryIcon from '@/components/icons/ScoreQueryIcon.vue'
import AuditIcon from '@/components/icons/AuditIcon.vue'

// 信息分类数据
interface Category {
  id: number
  name: string
  icon: string
  count: number
  color: string
}

const categories = ref<Category[]>([
  { id: 1, name: '考试公告', icon: 'exam', count: 12, color: '#4facfe' },
  { id: 2, name: '招生简章', icon: 'recruitment', count: 8, color: '#7ee8fa' },
  { id: 3, name: '成绩查询', icon: 'score', count: 15, color: '#00f2fe' },
  { id: 4, name: '资格审核', icon: 'audit', count: 6, color: '#ffd700' }
])

// 已发布信息列表数据
interface PublishInfo {
  id: number
  type: string
  title: string
  date: string
  views: number
  content: string
  isTop: boolean
}

const publishedList = ref<PublishInfo[]>([
  {
    id: 1,
    type: '考试公告',
    title: '2025年春季招生考试报名通知',
    date: '2025-01-15',
    views: 1234,
    content: '根据教育部统一安排,2025年春季招生考试报名工作将于2月1日正式启动。请各位考生提前准备相关材料,按时完成报名。报名网址:www.example.com,咨询电话:400-123-4567。',
    isTop: true
  },
  {
    id: 2,
    type: '成绩查询',
    title: '关于公布2024年秋季考试成绩的公告',
    date: '2025-01-10',
    views: 3456,
    content: '2024年秋季各科目考试成绩已完成统计核算工作,现予以公布。考生可登录成绩查询系统查询本人成绩,如有异议请在规定时间内申请复核。',
    isTop: true
  },
  {
    id: 3,
    type: '资格审核',
    title: '2025年教师资格认定工作安排',
    date: '2025-01-08',
    views: 987,
    content: '根据《教师资格条例》实施办法,现将2025年教师资格认定工作有关事项通知如下:申报时间为3月1日-3月31日,请符合条件的申请人按要求准备材料。',
    isTop: false
  },
  {
    id: 4,
    type: '考试公告',
    title: '2024年度优秀考生表彰名单公示',
    date: '2025-01-05',
    views: 2345,
    content: '经各考点推荐、专家评审,现将2024年度优秀考生名单予以公示。公示期为7个工作日,如有异议请向监督部门反映。',
    isTop: false
  },
  {
    id: 5,
    type: '招生简章',
    title: '2025年研究生招生简章发布',
    date: '2025-01-03',
    views: 4567,
    content: '我校2025年研究生招生简章现已正式发布,包含招生专业目录、考试科目、报考条件等详细信息,欢迎广大考生报考。',
    isTop: false
  },
  {
    id: 6,
    type: '考试公告',
    title: '2025年上半年考试时间安排表',
    date: '2025-01-01',
    views: 5678,
    content: '现将2025年上半年各类考试时间安排公布如下,请考生合理安排时间,做好备考准备。具体考试时间以准考证为准。',
    isTop: false
  },
  {
    id: 7,
    type: '成绩查询',
    title: '考试成绩复核申请流程说明',
    date: '2024-12-28',
    views: 876,
    content: '对考试成绩有异议的考生可在规定时间内申请成绩复核。复核内容包括:核查答题卡姓名、准考证号等信息是否一致,扫描图像是否清晰、完整等。',
    isTop: false
  },
  {
    id: 8,
    type: '资格审核',
    title: '考生报名资格审核结果公布',
    date: '2024-12-25',
    views: 1543,
    content: '根据报名资格审核工作安排,现将资格审核结果予以公布。审核通过的考生请按时缴费,未通过的考生可在规定时间内补充材料。',
    isTop: false
  }
])

// 当前选中的分类
const activeCategory = ref<number>(0) // 0表示全部

// 详情模态框
const dialogVisible = ref(false)
const currentInfo = ref<PublishInfo | null>(null)

// 分类筛选
const handleCategoryClick = (categoryId: number) => {
  activeCategory.value = categoryId
}

// 查看详情
const handleViewDetail = (info: PublishInfo) => {
  currentInfo.value = info
  dialogVisible.value = true
}

// 获取过滤后的列表
const filteredList = ref<PublishInfo[]>([])
const updateFilteredList = () => {
  if (activeCategory.value === 0) {
    filteredList.value = publishedList.value
  } else {
    const categoryName = categories.value.find(c => c.id === activeCategory.value)?.name || ''
    filteredList.value = publishedList.value.filter(item => item.type === categoryName)
  }
}

// 初始化列表
updateFilteredList()

// 监听分类变化
const handleCategoryChange = (categoryId: number) => {
  activeCategory.value = categoryId
  updateFilteredList()
}

// 获取类型对应的颜色
const getTypeColor = (type: string): string => {
  const category = categories.value.find(c => c.name === type)
  return category?.color || '#4facfe'
}
</script>

<template>
  <div class="publish-page">
    <!-- 顶部Banner -->
    <section class="banner-section">
      <div class="banner-content">
        <h1 class="banner-title">信息发布中心</h1>
        <p class="banner-subtitle">权威、及时、准确的招考信息发布平台</p>
        <div class="banner-stats">
          <div class="stat-item">
            <span class="stat-value">本月发布</span>
            <span class="stat-number">24条</span>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <span class="stat-value">总浏览</span>
            <span class="stat-number">1.2万</span>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <span class="stat-value">热门分类</span>
            <span class="stat-number">成绩查询</span>
          </div>
        </div>
      </div>
      <!-- 装饰圆圈 -->
      <div class="banner-decoration">
        <div class="decoration-circle decoration-circle-1"></div>
        <div class="decoration-circle decoration-circle-2"></div>
      </div>
    </section>

    <!-- 信息分类卡片 -->
    <section class="categories-section">
      <div class="categories-container">
        <div
          class="category-card"
          :class="{ active: activeCategory === 0 }"
          @click="handleCategoryChange(0)"
        >
          <div class="category-icon">
            <div class="icon-all">全部</div>
          </div>
          <h3 class="category-name">全部信息</h3>
          <p class="category-count">{{ publishedList.length }}条信息</p>
        </div>
        <div
          v-for="category in categories"
          :key="category.id"
          class="category-card"
          :class="{ active: activeCategory === category.id }"
          :style="{ '--card-color': category.color }"
          @click="handleCategoryChange(category.id)"
        >
          <div class="category-icon">
            <ExamIcon v-if="category.icon === 'exam'" :size="56" />
            <RecruitmentIcon v-if="category.icon === 'recruitment'" :size="56" />
            <ScoreQueryIcon v-if="category.icon === 'score'" :size="56" />
            <AuditIcon v-if="category.icon === 'audit'" :size="56" />
          </div>
          <h3 class="category-name">{{ category.name }}</h3>
          <p class="category-count">{{ category.count }}条信息</p>
        </div>
      </div>
    </section>

    <!-- 已发布信息列表 -->
    <section class="info-list-section">
      <div class="section-header">
        <h2 class="section-title">已发布信息</h2>
        <p class="section-subtitle">
          {{ activeCategory === 0 ? '全部信息' : categories.find(c => c.id === activeCategory)?.name }}
          ({{ filteredList.length }}条)
        </p>
      </div>
      <div class="info-list">
        <div
          v-for="info in filteredList"
          :key="info.id"
          class="info-item"
          :style="{ '--type-color': getTypeColor(info.type) }"
        >
          <div class="info-left">
            <div class="info-type-badge" :style="{ background: getTypeColor(info.type) }">
              {{ info.type }}
            </div>
            <div class="info-top-badge" v-if="info.isTop">置顶</div>
          </div>
          <div class="info-content">
            <h3 class="info-title">{{ info.title }}</h3>
            <div class="info-meta">
              <span class="meta-item">
                <i class="icon-calendar">📅</i>
                {{ info.date }}
              </span>
              <span class="meta-item">
                <i class="icon-view">👁️</i>
                {{ info.views }}次浏览
              </span>
            </div>
          </div>
          <div class="info-action">
            <button class="btn-detail" @click="handleViewDetail(info)">查看详情</button>
          </div>
        </div>
      </div>
    </section>

    <!-- 详情模态框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentInfo?.title"
      width="600px"
      center
      class="info-dialog"
    >
      <div v-if="currentInfo" class="dialog-content">
        <div class="dialog-meta">
          <span class="meta-badge" :style="{ background: getTypeColor(currentInfo.type) }">
            {{ currentInfo.type }}
          </span>
          <span class="meta-date">发布时间: {{ currentInfo.date }}</span>
          <span class="meta-views">浏览量: {{ currentInfo.views }}</span>
        </div>
        <div class="dialog-text">
          {{ currentInfo.content }}
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* ============================================
   页面容器
   ============================================ */
.publish-page {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}

/* ============================================
   顶部Banner区域
   ============================================ */
.banner-section {
  position: relative;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  padding: 60px 48px;
  overflow: hidden;
}

.banner-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.banner-title {
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.banner-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 40px;
  letter-spacing: 1px;
}

.banner-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-value {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
}

/* Banner装饰 */
.banner-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.decoration-circle-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -100px;
}

.decoration-circle-2 {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -50px;
}

/* ============================================
   信息分类卡片区域
   ============================================ */
.categories-section {
  padding: 60px 48px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 50%);
}

.categories-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.category-card {
  background: white;
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, var(--card-color, #4facfe) 0%, #00f2fe 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(79, 172, 254, 0.2);
}

.category-card:hover::before {
  opacity: 1;
}

.category-card.active {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(79, 172, 254, 0.3);
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%);
}

.category-card.active::before {
  opacity: 1;
  height: 6px;
}

.category-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  height: 60px;
}

.icon-all {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.category-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.category-count {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ============================================
   已发布信息列表区域
   ============================================ */
.info-list-section {
  padding: 60px 48px 80px;
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}

.section-header {
  max-width: 1200px;
  margin: 0 auto 40px;
  text-align: center;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
}

.info-list {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  background: white;
  border-radius: 16px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.info-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--type-color, #4facfe);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.info-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(79, 172, 254, 0.15);
}

.info-item:hover::before {
  opacity: 1;
}

.info-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-type-badge {
  padding: 6px 16px;
  border-radius: 20px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.info-top-badge {
  padding: 4px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b6914;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.info-content {
  flex: 1;
  min-width: 0;
}

.info-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-meta {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--text-secondary);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-calendar,
.icon-view {
  font-size: 14px;
}

.info-action {
  flex-shrink: 0;
}

.btn-detail {
  padding: 10px 24px;
  border-radius: 50px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.2);
}

.btn-detail:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

/* ============================================
   详情模态框
   ============================================ */
.info-dialog :deep(.el-dialog__header) {
  padding: 24px 32px;
  border-bottom: 1px solid #f0f0f0;
}

.info-dialog :deep(.el-dialog__title) {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.info-dialog :deep(.el-dialog__body) {
  padding: 32px;
}

.dialog-content {
  line-height: 1.8;
}

.dialog-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
}

.meta-badge {
  padding: 6px 16px;
  border-radius: 20px;
  color: white;
  font-size: 13px;
  font-weight: 500;
}

.meta-date,
.meta-views {
  font-size: 14px;
  color: var(--text-secondary);
}

.dialog-text {
  font-size: 16px;
  color: var(--text-primary);
  line-height: 1.8;
  text-align: justify;
}

.info-dialog :deep(.el-button--primary) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 50px;
  padding: 10px 32px;
}

/* ============================================
   响应式设计
   ============================================ */
@media (max-width: 768px) {
  .banner-section {
    padding: 40px 24px;
  }

  .banner-title {
    font-size: 32px;
  }

  .banner-subtitle {
    font-size: 16px;
  }

  .banner-stats {
    gap: 16px;
  }

  .stat-divider {
    height: 30px;
  }

  .categories-section {
    padding: 40px 24px;
  }

  .categories-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }

  .category-card {
    padding: 24px 16px;
  }

  .category-icon {
    height: 48px;
  }

  .icon-all {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }

  .category-name {
    font-size: 16px;
  }

  .info-list-section {
    padding: 40px 24px;
  }

  .section-title {
    font-size: 28px;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
  }

  .info-left {
    width: 100%;
  }

  .info-action {
    width: 100%;
  }

  .btn-detail {
    width: 100%;
  }

  .info-dialog :deep(.el-dialog) {
    width: 90% !important;
  }

  .dialog-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .banner-section {
    padding: 50px 36px;
  }

  .categories-section {
    padding: 50px 36px;
  }

  .info-list-section {
    padding: 50px 36px 70px;
  }
}
</style>
